<template>
  <div>
    <el-dialog
      :title="param.id ? '编辑消息' : '新增消息'"
      :visible.sync="isShowModel"
      :before-close="handleClose"
      width="600px"
    >
      <el-form ref="form" :model="param" :rules="rules" label-width="80px">
        <el-form-item label="标题名称" prop="title">
          <el-input v-model="param.title" placeholder="请输入标题名称" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="param.content" placeholder="请输入内容" type="textarea" :rows="4" :autosize="{ minRows: 5, maxRows: 5 }" />
        </el-form-item>
        <el-form-item label="消息类型" prop="msgTypeId">
          <el-select v-model="param.msgTypeId" style="width: 100%;" @change="changeType">
            <el-option label="商户消息" value="1" />
            <el-option label="场馆消息" value="2" />
            <el-option label="小程序消息" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="param.msgTypeId == '1' || param.msgTypeId == '2'" label="通知商户" prop="shopIds">
          <el-checkbox v-if="param.msgTypeId == '1'" v-model="checkAll" :indeterminate="isIndeterminate" style="display: inline-block;" @change="handleCheckAllChange">全选</el-checkbox>
          <el-select v-model="param.shopIds" filterable multiple style="width: 100%;" @change="changeShop">
            <el-option v-for="item,i in shops" :key="i" :label="item.shopName" :value="item.shopId" />
          </el-select>
          <!-- <el-checkbox-group v-model="param.shopIds" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item,i in shops" :key="i" :label="item.shopId">{{ item.shopName }}</el-checkbox>
          </el-checkbox-group> -->
        </el-form-item>
        <el-form-item v-if="param.msgTypeId == '2'" label="通知场馆" prop="recipients">
          <el-checkbox-group v-model="param.recipients">
            <el-checkbox v-for="item,i in venues" :key="i" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="param.msgTypeId == '1' || param.msgTypeId == '2'" label="附件">
          <div class="df_ac">
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              :data="uploadParam"
              :file-list="fileList"
              :on-remove="uploadImgDel"
              :limit="1"
              accept=".doc,.docx,.pdf,.word,.Word"
              :on-success="e => uploadSuccess(e)"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div class="placeholder9 ml10">建议上传PDF、Word文件</div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="saveLoading" type="primary" @click="onSubmit('0')">保 存</el-button>
        <el-button :loading="subLoading" type="primary" @click="onSubmit('1')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile, shopListb, gymListByShopIds, MessageEdit, MessageDetail } from '@/api'
import { rules } from './config'
export default {
  data() {
    return {
      param: {
        shopIds: [],
        recipients: []
      },
      isDetail: false,
      subLoading: false,
      saveLoading: false,
      isShowModel: false,
      rules,
      shops: [],
      venues: [],
      checkAll: false,
      isIndeterminate: false,
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'PLATFORM_MSG_FILE'
      },
      fileList: []
    }
  },
  methods: {
    handleCheckAllChange(val) {
      const param = { ...this.param }
      const shops = [...this.shops]
      param.shopIds = val ? shops.map(s => s.shopId) : []
      this.param = param
      this.isIndeterminate = false
      this.changeShop()
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.shops.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.shops.length
    },
    onSubmit(isPublish) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const param = { ...this.param, isPublish }
          param.shopIds = param.shopIds.join(',')
          param.recipients = param.recipients.join(',')
          if (isPublish === '0') {
            this.saveLoading = true
          } else {
            this.subLoading = true
          }

          MessageEdit({ param }).then(res => {
            this.subLoading = false
            this.saveLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success('提交成功')
            this.handleClose()
            this.$emit('success')
          }, () => {
            this.subLoading = false
            this.saveLoading = false
          })
        }
      })
    },
    getDetail(id) {
      MessageDetail({ param: { id }}).then(res => {
        const obj = { ...res.record }
        if (obj.shopIds) {
          obj.shopIds = obj.shopIds.split(',')
        } else {
          obj.shopIds = []
        }
        if (obj.recipients) {
          obj.recipients = obj.recipients.split(',')
        } else {
          obj.recipients = []
        }
        this.param = { ...obj }
        if (obj.msgTypeId === '2') {
          this.getShops()
          this.changeShop()
        } else if (obj.msgTypeId === '1') {
          this.getShops()
        }
      })
    },
    changeType(val) {
      if (val === '2' || val === '1') {
        this.getShops()
        this.$set(this.param, 'shopIds', [])
        this.$set(this.param, 'recipients', [])
      }
    },
    changeShop() {
      if (this.param.shopIds && this.param.shopIds.length > 0) {
        const checkedCount = this.param.shopIds.length
        this.checkAll = checkedCount === this.shops.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.shops.length
        gymListByShopIds({ param: { shopIds: this.param.shopIds }}).then(res => {
          this.venues = res.recordList
        })
      } else {
        this.venues = []
      }
    },
    getShops() {
      shopListb({ param: {}}).then(res => {
        this.shops = res.recordList
      })
    },
    uploadSuccess(reso) {
      console.log(reso)
      this.$set(this.param, 'filePath', reso.insertUrl)
    },
    uploadImgDel() {
      this.$set(this.param, 'filePath', '')
    },
    handleClose() {
      this.isShowModel = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
